<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
pageContext.setAttribute("APP_PATH",request.getContextPath());
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
</head>
<link rel="stylesheet" type="text/css" href="${APP_PATH}/static/bootstrap/css/bootstrap.css" />
<link href="${APP_PATH}/style/mylogin.css" rel="stylesheet">
<script src="${APP_PATH}/static/jquery/jquery-3.4.1.js" charset="utf-8"></script>
<!-- background: url("images/logo.jpg") no-repeat;

background-size:cover;或者background-size:100%; -->


<body  background="${APP_PATH}/images/logo.jpg" style="background-size:cover;">


	<!--头部-->
	<div class="header">
		<div class="h_center">
			<p>员工管理系统3.0感谢支持！</p>
		</div>
	</div>
<div>
<!-- <div style="height:50%;width:50%;float: left;"><img src="images/logo.jpg" />	</div> -->
	<!--体部-->
	<%-- <div>
		<!--中部-->
		<div class="login_center">
			<!--登录背景-->
			<div class="login_bg">
				<h4>登陆</h4>
				<form action="toLogin" id="login" method="post"
					onsubmit="return checkLogin()">
					<!--用户名-->
					<div class="username">
						<span><img src="${APP_PATH}/images/userName_Icon.png"></span> <input
							type="text" placeholder="请输入用户名..." id="userName" name="userName">
					</div>
					<!--密码-->
					<div class="password">
						<span><img src="${APP_PATH}/images/password_Icon.png"></span> <input
							type="password" name="userPwd" id="userPwd" placeholder="请输入密码...">
					</div>
					<div class="login_btn">
						<input type="submit" class="login_btn" value="登录">
					</div>
				</form>
				<div class="forgotPwd" style="text-align: left">
					<!--忘记密码-->

					<a href="">忘记密码</a> <a
						href="${APP_PATH}/regist.jsp">免费注册</a>
				</div>

			</div>
		</div>
	</div> --%>
	
	<div   class="modal-body" style="float:right;margin-right: 240px;margin-top: 100px">
		<form class="form-horizontal" style="width: 800px">
			<div class="form-group">
				<label class="col-sm-2 control-label"> 用户名</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="userName"
						name="userName" placeholder="用户名"> <span id="helpBlock2"
						class="help-block"></span>
				</div>
			</div>
			<div class="form-group">
				<label for="name" class="col-sm-2 control-label">密 码</label>
				<div class="col-sm-3">
					<input type="password" class="form-control" id="userPwd"
						name="userPwd" placeholder="密 码"> <span id="helpBlock2"
						class="help-block"></span>
				</div>
			</div>
			<div  class="form-group" >
				<label for="email" class="col-sm-2 control-label">验证码</label>
				<div class="col-sm-3">
					<input type="text" class="form-control" id="code" name="code"
						placeholder="验证码">  
						<span id="helpBlock2" class="help-block"></span>
				</div>
				<img id="imgObj" style="height: 23px;float: right;margin-top:6px;margin-right: 380px"
						alt="验证码" src="${APP_PATH}/code" onclick="changeImg()" />
			</div>

			<div style="height: 20px;color: red;margin-right: 400px">
				<div style="text-align: center; color: red">
					<input class="btn btn-primary" type="button" id="login" value="登陆" />
					<a href="${APP_PATH}/regist.jsp">免费注册</a>
				</div>
			</div>
		</form>

		
	</div>
	</div>
	<div  style="margin-top: 25%;margin-right: 230px;">
	<%@include file="/footer.jsp" %>
	</div>
</body>
<script type="text/javascript">
		function changeImg() {
			var imgSrc = $("#imgObj");
			var src = imgSrc.attr("src");
			imgSrc.attr("src", chgUrl(src));
		}
		//时间戳   
		//为了使每次生成图片不一致，即不让浏览器读缓存，所以需要加上时间戳   
		function chgUrl(url) {
			var timestamp = (new Date()).valueOf();
			url = url.substring(0, 17);
			if ((url.indexOf("&") >= 0)) {
				url = url + "×tamp=" + timestamp;
			} else {
				url = url + "?timestamp=" + timestamp;
			}
			return url;
		}
	</script>
	<script type="text/javascript">

$("#login").click(function() {
	$("#code").next().next("span").empty();
      var user=document.getElementById("userName").value;
     var pwd=document.getElementById("userPwd").value;
     var code=$("#code").value;
    //2.判断
    if(user==""){
         alert("亲，用户名不能为空");
         document.getElementById("userName").focus();// 光标占位
         return false;          
      }else if(pwd==""){
        alert("亲，密码不能为空");
        document.getElementById("userPwd").focus();// 光标占位
        return false;          
     }else if(code==''){
    	 alert("亲，验证码不能为空");
         document.getElementById("code").focus();// 光标占位
     }else{	 
    	 $.ajax({
    		 url : "toLogin",
    		 type:"POST",
			data : $("form").serialize(),
			success : function(result) {
					if (result.data.msg!=null) {
						$("#code").next("span").text(result.data.msg);
						$("#code").parent().addClass("has-error");
					}else if(result.data.iRet == 0){
						window.location.href = "err.jsp";
					}else if(result.data.error!=null){
						$("#userPwd").next("span").text(result.data.error);
						$("#userPwd").parent().addClass("has-error");
					}else {
						
						window.location.href = "index.jsp";
					}
					
				}
    		 
    	 });
     return true;
     }               
    
  });
</script>
</html>